<template>
  <div>
    <el-dialog :title="!dataForm.id ? '新增' : '修改'" :close-on-click-modal="false" :visible.sync="visible" center>
			<el-button class="miui-dialog-close-btn" @click="visible = false">关闭页面</el-button>
      <el-form :model="dataForm" :rules="dataRule" ref="dataForm" label-width="100px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="商品类别" prop="ctgId">
              <el-select v-model="dataForm.ctgId" placeholder="请选择" @change="setSupply">
                <el-option v-for="item in ctgOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="商品名称" prop="name">
              <el-input v-model="dataForm.name" placeholder="商品名称"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-row :gutter="15">
              <el-col :span="16">
                <el-form-item label="制造商" prop="supplyName">
                  <el-input v-model="dataForm.supplyName" placeholder="制造商" readonly="readonly"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-button @click="getSupplyList">选择</el-button>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="12">
            <el-row :gutter="15">
              <el-col :span="16">
                <el-form-item label="商品品种" prop="brandName">
                  <el-input v-model="dataForm.brandName" placeholder="商品品种" readonly="readonly"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-button @click="getBrandList">选择</el-button>
              </el-col>
            </el-row>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="厂家型号" prop="manufacturerSpec">
              <el-input v-model="dataForm.manufacturerSpec" placeholder="厂家型号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="型号" prop="spec">
              <el-input v-model="dataForm.spec" placeholder="型号"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="厂家色号" prop="manufacturerColorNumber">
              <el-input v-model="dataForm.manufacturerColorNumber" placeholder="厂家色号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="色号" prop="color">
              <el-input v-model="dataForm.color" placeholder="色号"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="计量单位" prop="unitType">
              <el-select v-model="dataForm.unitType" placeholder="请选择">
                <el-option v-for="item in unitTypeOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
              <!-- <el-input v-model="dataForm.unitType" placeholder="计量单位"></el-input> -->
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="收费项目" prop="payType">
              <el-select v-model="dataForm.payType">
                <el-option value="1" label="检查费"></el-option>
                <el-option value="2" label="挂号费"></el-option>
              </el-select>
              <!-- <el-input v-model="dataForm.payType" placeholder="收费项目"></el-input> -->
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="批号管理" prop="batchManagement">
              <el-switch v-model="dataForm.batchManagement" active-color="#13ce66" inactive-color="#e7e7e7"
                active-value="1" inactive-value="2"></el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="12"></el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="编码" prop="code">
              <el-input v-model="dataForm.code" placeholder="编码" readonly="readonly"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="条形码" prop="barcode">
              <el-input v-model="dataForm.barcode" placeholder="条形码" readonly="readonly"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="标准零售价" prop="retailPrice">
              <el-input v-model="dataForm.retailPrice" placeholder="标准零售价"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="含税单价" prop="taxPrice">
              <el-input v-model="dataForm.taxPrice" placeholder="含税单价"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取消</el-button>
        <el-button type="primary" @click="dataFormSubmit()" v-prevent-re-click>确定</el-button>
      </span>
    </el-dialog>

    <!-- 商品制造商信息 -->
    <el-dialog title="制造商查询" :close-on-click-modal="false" :visible.sync="supplyData.visible">
      <div class="avue-crud">
        <el-table :data="supplyData.dataList" border v-loading="supplyData.dataListLoading" highlight-current-row>
          <el-table-column type="index" width="50">
            <template slot-scope="scope">
              <el-radio v-model="dataForm.supplyId" :label="scope.row.id" style="position: relative;left: 6px;top:-2px;"
                @change="changeSupply(scope.row)">&nbsp;</el-radio>
            </template>
          </el-table-column>
          <el-table-column prop="id" header-align="center" align="center" label="供应商代码"></el-table-column>
          <el-table-column prop="name" header-align="center" align="center" label="供应商名称"></el-table-column>
        </el-table>
      </div>
    </el-dialog>


    <!-- 商品品种信息 -->
    <el-dialog title="商品品种查询" :close-on-click-modal="false" :visible.sync="brandData.visible">
      <div class="avue-crud">
        <el-table :data="brandData.dataList" border v-loading="brandData.dataListLoading" highlight-current-row>
          <el-table-column type="index" width="50">
            <template slot-scope="scope">
              <el-radio v-model="dataForm.brandId" :label="scope.row.id" style="position: relative;left: 6px;top:-2px;"
                @change="changeBrand(scope.row)">&nbsp;</el-radio>
            </template>
          </el-table-column>
          <el-table-column prop="id" header-align="center" align="center" label="供应商代码"></el-table-column>
          <el-table-column prop="name" header-align="center" align="center" label="供应商名称"></el-table-column>
        </el-table>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    goodsGetObj,
    goodsAddObj,
    goodsPutObj
  } from '@/api/eims/goods.js'
  import {
    fetchCtgList
  } from '@/api/eims/ctg.js' // 商品类别信息
  import {
    fetchSupplyList
  } from '@/api/eims/supply.js' // 商品制造商信息
  import {
    fetchBrandList
  } from '@/api/eims/brand.js' // 商品品种信息

  export default {
    data() {
      return {
        visible: false,
        ctgOptions: [],
        dataForm: {
          id: 0,
          name: '', // 商品名称
          code: '0.0.0.00000000.000', // 商品编码
          barcode: '00000000000000', // 条形码
          supplyId: '', // 供应商ID
          supplyName: '', // 供应商名称
          brandId: '', // 商品品种ID
          brandName: '', // 商品名称
          ctgId: '', // 类别
          status: '', // 商品状态
          unitType: '', // 计量单位
          payType: '', // 收费项目
          spec: '', // 型号
          color: '', // 色号
          manufacturerColorNumber: '', // 厂家色号
          manufacturerSpec: '', // 厂家型号
          batchManagement: '2', // 批号管理
          retailPrice: '', // 标准零售价
          taxPrice: '' // 含税单价
        },
        dataRule: {
          name: [{
            required: true,
            message: '名称不能为空',
            trigger: 'blur'
          }],
          code: [{
            required: true,
            message: '编码不能为空',
            trigger: 'blur'
          }],
          barcode: [{
            required: true,
            message: '条形码不能为空',
            trigger: 'blur'
          }],
          supplyName: [{
            required: true,
            message: '制造商不能为空',
            trigger: 'blur'
          }],
          brandName: [{
            required: true,
            message: '商品品种不能为空',
            trigger: 'blur'
          }],
          ctgId: [{
            required: true,
            message: '商品类别不能为空',
            trigger: 'blur'
          }],
          status: [{
            required: true,
            message: '状态不能为空',
            trigger: 'blur'
          }],
          unitType: [{
            required: true,
            message: '计量单位不能为空',
            trigger: 'blur'
          }],
          payType: [{
            required: true,
            message: '收费项目不能为空',
            trigger: 'blur'
          }],
          spec: [{
            required: true,
            message: '商品规格/型号不能为空',
            trigger: 'blur'
          }],
          color: [{
            required: true,
            message: '色号不能为空',
            trigger: 'blur'
          }],
          manufacturerColorNumber: [{
            required: true,
            message: '厂家色号不能为空',
            trigger: 'blur'
          }],
          manufacturerSpec: [{
            required: true,
            message: '厂家型号不能为空',
            trigger: 'blur'
          }],
          batchManagement: [{
            required: true,
            message: '批号管理(1-是，2-否)不能为空',
            trigger: 'blur'
          }]
        },
        supplyData: {
          visible: false,
          dataList: [],
          pageIndex: 1,
          pageSize: 100,
          totalPage: 0,
          dataListLoading: false,
        },
        brandData: {
          visible: false,
          dataList: [],
          pageIndex: 1,
          pageSize: 100,
          totalPage: 0,
          dataListLoading: false,
        },
        // 片 盒 副 瓶 张 把 个 只 套 天 包
        unitTypeOptions: [{
            value: 1,
            label: '片'
          }, {
            value: 2,
            label: '盒'
          }, {
            value: 3,
            label: '副'
          },
          {
            value: 4,
            label: '瓶'
          }, {
            value: 5,
            label: '张'
          }, {
            value: 6,
            label: '把'
          },
          {
            value: 7,
            label: '个'
          }, {
            value: 8,
            label: '只'
          }, {
            value: 9,
            label: '套'
          },
          {
            value: 10,
            label: '天'
          }, {
            value: 11,
            label: '包'
          }
        ]
      }
    },
    methods: {
      init(id) {
        this.dataForm.id = id || 0
        this.visible = true
        fetchCtgList().then(response => {
          if(response.data.code == '0'){
            let ctgData = response.data.data.records
            let ctgList = []
            ctgData.forEach(item => {
              let ctgObj = {
                value: item.id,
                label: item.name
              }
              ctgList.push(ctgObj)
            })
            this.ctgOptions = ctgList
            this.$nextTick(() => {
              this.$refs['dataForm'].resetFields()
              if (this.dataForm.id) {
                goodsGetObj(this.dataForm.id).then(result => {
                  if(result.data.code == '0'){
                    this.dataForm = result.data.data
                  }else{
                    this.$message.error(result.data.msg)
                  }
                })
              }
            })
          }else{
            this.$message.error(response.data.msg)
          }
        })

      },
      // 表单提交
      dataFormSubmit() {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            if (this.dataForm.id) {
              goodsPutObj(this.dataForm).then(response => {
                if(response.data.code == '0'){
                  this.$message.success('修改成功')
                  this.visible = false
                  this.$emit('refreshDataList')
                }else{
                  this.$message.error(response.data.msg)
                }
              });
            } else {
              this.dataForm.status = '1'
              goodsAddObj(this.dataForm).then(response => {
                if(response.data.code == '0'){
                  this.$message.success('添加成功')
                  this.visible = false
                  this.$emit('refreshDataList')
                }else{
                  this.$message.error(response.data.msg)
                }
              })
            }
          }
        })
      },




      // 获取商品制造商信息
      getSupplyList() {
        this.supplyData.visible = true
        this.supplyData.dataListLoading = true
        fetchSupplyList().then(result => {
          this.supplyData.dataList = result.data.data.records
          this.supplyData.totalPage = result.data.data.total
        })
        this.supplyData.dataListLoading = false
      },
      // 获取商品品种信息
      getBrandList() {
        this.brandData.visible = true
        this.brandData.dataListLoading = true
        fetchBrandList().then(result => {
          this.brandData.dataList = result.data.data.records
        })
        this.brandData.dataListLoading = false
      },
      changeSupply(supObj) {
        this.dataForm.supplyId = supObj.id
        this.dataForm.supplyName = supObj.name
        this.supplyData.visible = false
      },
      changeBrand(brandObj) {
        this.dataForm.brandId = brandObj.id
        this.dataForm.brandName = brandObj.name
        this.brandData.visible = false
      },
      PrefixZero(num, n) {
        return (Array(n).join(0) + num).slice(-n);
      }
    },
    computed: {
      newCtg() {
        return this.dataForm.ctgId
      },
      newSupply() {
        return this.dataForm.supplyId
      },
      newBrand() {
        return this.dataForm.brandId
      },
      newBrandName() {
        return this.dataForm.brandName
      },
      newManufacturerSpec() {
        return this.dataForm.manufacturerSpec
      },
      newManufacturerColorNumber() {
        return this.dataForm.manufacturerColorNumber
      },
      newSpec() {
        return this.dataForm.spec
      },
      newColorNumber() {
        return this.dataForm.color
      }
    },
    watch: {
      // 类别
      newCtg(val) {
        // 商品类别ctgId + 供应商supplyId + 品牌brandId + 型号spec + 色号colorNumber
        let supplyNum = (Array(2).join(0) + this.dataForm.supplyId).slice(-2);
        let brandNum = (Array(2).join(0) + this.dataForm.brandId).slice(-2);
        let specNum = (Array(9).join(0) + this.dataForm.spec).slice(-9);
        let colorNumberNum = (Array(4).join(0) + this.dataForm.color).slice(-4);
        this.dataForm.code = val + '.' + supplyNum + '.' + brandNum + '.' + specNum + '.' + colorNumberNum
        this.dataForm.barcode = val + supplyNum + brandNum + specNum + colorNumberNum
      },
      newSupply(val) {
        let ctgNum = (this.dataForm.ctgId) ? this.dataForm.ctgId : '0'
        let supplyNum = (Array(2).join(0) + val).slice(-2);
        let brandNum = (Array(2).join(0) + this.dataForm.brandId).slice(-2);
        let specNum = (Array(9).join(0) + this.dataForm.spec).slice(-9);
        let colorNumberNum = (Array(4).join(0) + this.dataForm.color).slice(-4);
        this.dataForm.code = ctgNum + '.' + supplyNum + '.' + brandNum + '.' + specNum + '.' + colorNumberNum
        this.dataForm.barcode = ctgNum + supplyNum + brandNum + specNum + colorNumberNum
      },
      newBrand(val) {
        let ctgNum = (this.dataForm.ctgId) ? this.dataForm.ctgId : '0'
        let supplyNum = (Array(2).join(0) + this.dataForm.supplyId).slice(-2);
        let brandNum = (Array(2).join(0) + val).slice(-2);
        let specNum = (Array(9).join(0) + this.dataForm.spec).slice(-9);
        let colorNumberNum = (Array(4).join(0) + this.dataForm.color).slice(-4);
        this.dataForm.code = ctgNum + '.' + supplyNum + '.' + brandNum + '.' + specNum + '.' + colorNumberNum
        this.dataForm.barcode = ctgNum + supplyNum + brandNum + specNum + colorNumberNum
      },
      newBrandName(val) {
        this.dataForm.name = val
      },
      newManufacturerSpec(val) {
        if (val) {
          let ctgNum = (this.dataForm.ctgId) ? this.dataForm.ctgId : '0'
          let supplyNum = (Array(2).join(0) + this.dataForm.supplyId).slice(-2);
          let brandNum = (Array(2).join(0) + this.dataForm.brandId).slice(-2);
          let specNum = (Array(9).join(0) + val).slice(-9);
          let colorNumberNum = (Array(4).join(0) + this.dataForm.color).slice(-4);
          this.dataForm.code = ctgNum + '.' + supplyNum + '.' + brandNum + '.' + specNum + '.' + colorNumberNum
          this.dataForm.spec = (val.length > 9) ? val.substring(val.length - 9) : val
          this.dataForm.barcode = ctgNum + supplyNum + brandNum + specNum + colorNumberNum
        }
      },
      newManufacturerColorNumber(val) {
        if (val) {
          let ctgNum = (this.dataForm.ctgId) ? this.dataForm.ctgId : '0'
          let supplyNum = (Array(2).join(0) + this.dataForm.supplyId).slice(-2);
          let brandNum = (Array(2).join(0) + this.dataForm.brandId).slice(-2);
          let specNum = (Array(9).join(0) + this.dataForm.spec).slice(-9);
          let colorNumberNum = (Array(4).join(0) + val).slice(-4);
          this.dataForm.code = ctgNum + '.' + supplyNum + '.' + brandNum + '.' + specNum + '.' + colorNumberNum
          this.dataForm.color = (val.length > 4) ? val.substring(val.length - 4) : val
          this.dataForm.barcode = ctgNum + supplyNum + brandNum + specNum + colorNumberNum
        }
      },
      newSpec(val) {
        if (val) {
          let ctgNum = (this.dataForm.ctgId) ? this.dataForm.ctgId : '0'
          let supplyNum = (Array(2).join(0) + this.dataForm.supplyId).slice(-2);
          let brandNum = (Array(2).join(0) + this.dataForm.brandId).slice(-2);
          let specNum = (Array(9).join(0) + val).slice(-9);
          let colorNumberNum = (Array(4).join(0) + this.dataForm.color).slice(-4);
          this.dataForm.code = ctgNum + '.' + supplyNum + '.' + brandNum + '.' + specNum + '.' + colorNumberNum
          this.dataForm.barcode = ctgNum + supplyNum + brandNum + specNum + colorNumberNum
        }

      },
      newColorNumber(val) {
        let ctgNum = (this.dataForm.ctgId) ? this.dataForm.ctgId : '0'
        let supplyNum = (Array(2).join(0) + this.dataForm.supplyId).slice(-2);
        let brandNum = (Array(2).join(0) + this.dataForm.brandId).slice(-2);
        let specNum = (Array(9).join(0) + this.dataForm.spec).slice(-9);
        let colorNumberNum = (Array(4).join(0) + val).slice(-4);
        this.dataForm.code = ctgNum + '.' + supplyNum + '.' + brandNum + '.' + specNum + '.' + colorNumberNum
        this.dataForm.barcode = ctgNum + supplyNum + brandNum + specNum + colorNumberNum
      }
    }
  }
</script>
